<template>
	<view class="">
		<view class="content">
			<view class="header">
				<image v-if="hasLogin" src="@/static/user_image.png" class="user-image" mode="widthFix"></image>
				<image v-else src="/static/unlogin.png" class="user-image" mode="widthFix"></image>
				<view v-if="hasLogin" class="user-info">
					<view class="user-info-name"> {{userInfo.name}}，欢迎您！</view>
					<view class="user-info-store">
						<text class="user-info-store-icon"> </text>
						<text class="user-info-role-value"> 所属门店：锦业路店 </text>
					</view>
					<view class="user-info-role">
						<text class="user-info-role-icon"> </text>
						<text class="user-info-role-value"> 职位：{{roleNames}} </text>
					</view>
				</view>
				<view v-else class="user-info">
					<text class="user-info_name"> 未登录 </text>
				</view>
			</view>
			<view class="girdData" v-for="(data,indexInt) in filterGirdData" :index="indexInt" :key="indexInt">
				<uni-section :title="data.title" type="line" title-font-size="18px">
					<uni-grid :column="4" :show-border="false" :square="false">
						<uni-grid-item v-for="(item, index) in data.gridList" :index="index" :key="index">
							<view class="grid-item-box" style="background-color: #fff;" @click="naviTo(item.link)">
								<uni-badge class="uni-badge-left-margin" :text="tags[item.tag]" absolute="rightTop"
									:offset="[-3, -3]" size="small">
									<image class="grid-item-box-icon-3" :src="item.image"></image>
								</uni-badge>
								<text class="grid-item-box-font-3">{{ item.text }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import roleAuth from '@/common/data/role_auth/roleauth.js';
	import indexGirdData from '@/common/data/index/indexGirdData.js';
	import dataDic from '@/common/data/dataDictionary.js'
	export default {
		props: {
			roleId: String,
			roleName: '',
			tags: {}
		},

		watch: {
			roleId(newVal) {
				// 处理变化
				this.init();
			}
		},

		computed: {
			...mapGetters({
				userInfo: 'user/info',
				hasLogin: 'user/hasLogin'
			}),
		},

		data() {
			return {
				girdData: indexGirdData,
				filterGirdData: [],
				roleAuth: roleAuth,
				roleNames: '',
				roleCodes: [],
				roleOpt: dataDic.role,
			};
		},

		created() {
			this.init();
		},

		methods: {
			async init() {
				this.roleCodes = this.userInfo?.roleCodes;
				// 权限名称
				this.initRoleName();
				// 初始化权限
				this.initGirdAuth();
			},

			initRoleName() {
				if (this.roleCodes && this.roleOpt.type) {
					const roleList = this.roleOpt.type;
					for (let i = 0; i < roleList.length; i++) {
						let obj = roleList[i];
						if (this.roleCodes.includes(String(obj.value))) {
							this.roleNames ?
								this.roleNames = this.roleNames + ";" + obj.text :
								this.roleNames = obj.text;
						}
					}
				}
			},

			initGirdAuth() {
				if(!this.roleCodes){
					return;
				}
				this.filterGirdData = [];
				const deepCopy = JSON.parse(JSON.stringify(this.girdData));
				const roleAuthMap = new Map();
				for (let i = 0; i < this.roleCodes.length; i++) {
					let roleCode = this.roleCodes[i];
					const authList = this.roleAuth[roleCode];
					if (!authList || authList.length === 0) {
						continue;
					}
					for (const roleAuth of authList) {
						let functionAuth = roleAuthMap.get(roleAuth.function)
						if (functionAuth) {
							functionAuth.operation.concat(roleAuth.operation);
						} else {
							functionAuth = roleAuth;
						}
						roleAuthMap.set(roleAuth.function, functionAuth);
					}
				}
				for (let i = 0; i < deepCopy.length; i++) {
					let data = deepCopy[i];
					let list = data.gridList ? data.gridList : [];
					let newList = [];
					let addFlag = false;
					for (let i = 0; i < list.length; i++) {
						let auth = roleAuthMap.get(list[i].function);
						if (auth && auth.operation.includes(list[i].operation)) {
							newList.push(list[i]);
							addFlag = true;
						}
					}
					data.gridList = newList;
					if (addFlag) {
						this.filterGirdData.push(data);
					}
				}
			},

			/**
			 * @param {Object} link
			 * 跳转页面
			 */
			naviTo(link) {
				uni.navigateTo({
					url: link,
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 80px;
		background-size: cover;
		background-position: top center;
		min-height: 100vh;
	}

	.content {
		z-index: 100;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url();
		background-position: top right;
		flex-wrap: wrap;
		flex-direction: column;
		display: flex;
		width: 100% !important;
		float: left;
		box-sizing: border-box;
		position: relative;
		font-size: 30rpx;
	}

	.header {
		margin-left: 10rpx;
		z-index: 100;
		margin-top: 70rpx;
		margin-bottom: 40rpx;
		margin-right: 10rpx;
		align-items: center;
		flex-wrap: wrap;
		display: flex;

		.user-image {
			height: 150rpx !important;
			width: 150rpx !important;
			flex-shrink: 0;
			border-bottom-left-radius: 50%;
			overflow: hidden;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			border-bottom-right-radius: 50%;
			background-color: var(--white) !important;
			color: var(--black) !important;

		}

		.user-info {
			margin-left: 10rpx;
			z-index: 100;
			color: #ffffff;
			flex: 1;
			margin-top: 0rpx;
			margin-bottom: 0rpx;
			margin-right: 10rpx;
			justify-content: space-between;
			flex-wrap: wrap;
			flex-direction: column;
			display: flex;
			width: auto;
			font-size: 30rpx;
		}

		.user-info-name {
			font-size: 48rpx;
		}

		.user-info-store,
		.user-info-role {
			align-items: center;
			display: flex;
		}

		.user-info-store-value,
		.user-info-role-value {
			margin-left: 10rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			margin-right: 10rpx;
		}

		.user-info-store-icon,
		.user-info-role-icon {
			font-size: 35rpx !important;

			font-family: "diygwui" !important;
			font-size: 32rpx;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.user-info-store-icon:before {
			content: "\e6cc";
		}

		.user-info-role-icon:before {
			content: "\e765";
		}
	}

	.gird-content {
		float: left;
		box-sizing: border-box;
		position: relative;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		background-color: var(--white) !important;
		color: var(--black) !important;
		padding-top: 20rpx;
		border-bottom-left-radius: 20rpx;
		z-index: 100;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 20rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 2rpx 2rpx 6rpx 1px rgba(154, 154, 154, 0.37);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 20rpx;
		margin-top: 0rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 20rpx;
		padding-right: 20rpx;

	}

	.gird-content-title {
		font-size: 36rpx;
		font-weight: normal;
		float: left;
		box-sizing: border-box;
		position: relative;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 90rpx;
		padding: 0 20rpx;
		justify-content: space-between;
		width: 100% !important;

	}

	.gird-content-list {
		display: flex;
		width: 100% !important;
		float: left;
		box-sizing: border-box;
		position: relative;
		font-size: 30rpx;

		&__inner {
			display: flex;
			flex-wrap: wrap;
			flex: 1;
			font-size: inherit;
		}

		&__item {
			width: 25%;
			font-size: inherit;
		}

		&__item--inner {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
			text-align: center;
			padding: 20rpx;
			position: relative;
			background-position: center;
			background-repeat: no-repeat;

			.item-image {
				font-variant: small-caps;
				display: inline-flex;
				text-align: center;
				justify-content: center;
				align-items: center;
				white-space: nowrap;
				position: relative;
				width: 80rpx;
				height: 80rpx;
				background-size: cover;
				background-position: center;
				vertical-align: middle;
				background-color: transparent;
				color: #333;

			}

			.item-image-img {
				font-size: inherit;
				border-radius: 200px;
				width: 100%;
				height: 100%;
			}

			.item-image-tag {
				background-color: var(--red) !important;
				color: var(--white) !important;
				border-radius: 200px;
				position: absolute;
				top: -20rpx;
				right: -20rpx;
				padding: 0;
				height: 14px;
				min-width: 14px;
				padding-left: 0px;
				padding-right: 0px;
			}

			.item-desc {
				font-size: inherit;
				white-space: nowrap;
			}
		}
	}




	.warp {
		padding: 20px 0px;
	}

	.girdData {
		margin-top: 5px;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
	}

	/deep/.uni-section {
		border-radius: 20rpx;
		box-shadow: 2rpx 2rpx 6rpx 1px rgba(154, 154, 154, 0.37);
	}

	.girdData:first-child {
		margin-top: 0px;
	}

	.image {
		width: 35px;
		height: 35px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	.grid-item-box-icon-3 {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.grid-item-box-font-3 {
		font-size: 14px;
	}

	.grid-item-box-icon-4 {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.grid-item-box-font-4 {
		font-size: 14px;
	}

	.uni-grid-item--border-top {
		border: 0px #D2D2D2 solid;
	}

	.uni-grid-item--border {
		border: 0px #D2D2D2 solid;
	}

	.grid-item-box.data-v-57280228 {
		padding: 8px 0;
	}

	/deep/.uni-section-header {
		&__content {
			font-size: 18rpx !important;
		}
	}


	/**
	 * 热门赛事图片滚动
	 */
	.hot-marathon {
		align-items: center;
		margin: 0rpx;
		background: #fff;
	}

	.hot-marathon-title {
		font-weight: 600;
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}

	.hot-marathon-banner {
		margin-top: 0rpx;
	}

	.hot-marathon-banner swiper {
		height: calc(750rpx / 2.3);
	}

	.hot-marathon-banner image {
		width: 100%;
		height: 100%;
	}
</style>